<template>
  <div>
    <div class="chart">
      <div style="width:80%;position:relative">
        <!-- <simple-bar-chart :search='opt' :api="url" ref="simpleBarChart"> -->
        <simple-bar-chart :api="url" ref="chartSelect">
          <template slot-scope="scopes">
            <!-- options写死的 -->
            <chart-select :options="scopes.opt" @changeValAction="handleChangeVal"/>
          </template>
        </simple-bar-chart>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{simpleBarChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <stacked-bar-chart :api="url1" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{stackedBarChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl1" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction1">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <line-bar-chart :api="url2" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{lineBarChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl2" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction2">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <simple-line-chart :api="url3" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{simpleLineChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl3" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction3">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <area-line-chart :api="url4" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{areaLineChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl4" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction4">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <multiple-line-chart :api="url5" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{multipleLineChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl5" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction5">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <multiple-area-line-chart :api="url6" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{multipleAreaLineChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl6" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction6">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <customized-pie-chart :api="url7" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{customizedPieChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl7" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction7">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <doughnut-pie-chart :api="url8" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{doughnutPieChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl8" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction8">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <circle-pie-chart :api="url9" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{circlePieChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl9" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction9">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <word-cloud-chart :api="url10" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{wordCloudChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl10" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction10">确定</el-button>
      </div>
    </div>

    <div class="chart">
      <div style="width:80%;position:relative">
        <mix-chart :api="url11" isShowSelect/>
      </div>
      <div class="chart-showData">
        <div class="chart-showData-title">api参数配置：</div>
        <pre>{{mixChart}}</pre>
      </div>
      <div>
        <div style="margin-bottom:10px;">
          <el-input placeholder="请输入url" v-model="testUrl11" style="width:300px" clearable></el-input>
        </div>
        <el-button type="primary" size="small" @click="testClickAction11">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 一个是路径，一个是查询条件
      // url: "api/chart/getSimpleBarData",
      // opt: {},
      // 测试数据
      simpleBarChart: {
        msgCode: "1",
        title: "普通柱状图",
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        data: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      },
      stackedBarChart: {
        msgCode: "1",
        title: "堆叠柱状图",
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        legendData: [
          "联盟广告",
          "视频广告",
          "222",
          "3333",
          "444",
          "555",
          "666",
          "777",
          "888",
          "999",
          "000"
        ],
        data: [
          {
            name: "联盟广告",
            type: "bar",
            stack: "广告",
            data: [10, 20, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "222",
            type: "bar",
            stack: "广告",
            data: [10, 20, 191, 234, 290, 330, 310]
          },
          {
            name: "3333",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "444",
            type: "bar",
            stack: "广告",
            data: [10, 20, 191, 234, 290, 330, 310]
          },
          {
            name: "555",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "666",
            type: "bar",
            stack: "广告",
            data: [10, 20, 191, 234, 290, 330, 310]
          },
          {
            name: "777",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "888",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "999",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "000",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      },
      lineBarChart: {
        msgCode: "1",
        title: "折柱混合图",
        xData: [
          "1月份",
          "2月份",
          "3月份",
          "4月份",
          "5月份",
          "6月份",
          "7月份",
          "8月份",
          "9月份",
          "10月份",
          "11月份",
          "12月份"
        ],
        legendData: ["男", "女"],
        data: [
          {
            name: "女",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "rgba(255,144,128,1)"
              }
            },
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },

          {
            name: "男",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "rgba(0,191,183,1)",
                barBorderRadius: 0
              }
            },
            data: [
              327,
              1776,
              507,
              1200,
              800,
              482,
              204,
              1390,
              1001,
              951,
              381,
              220
            ]
          },
          {
            name: "总数",
            type: "line",
            stack: "总量",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "rgba(252,230,48,1)",
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  formatter: function(p) {
                    return p.value > 0 ? p.value : "";
                  }
                }
              }
            },
            data: [
              1036,
              3693,
              2962,
              3810,
              2519,
              1915,
              1748,
              4675,
              6209,
              4323,
              2865,
              4298
            ]
          }
        ]
      },
      simpleLineChart: {
        msgCode: "1",
        title: "普通折线图",
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        data: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
            // smooth: true
          }
        ]
      },
      areaLineChart: {
        msgCode: "1",
        title: "面积折线图",
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        data: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
            smooth: true
          }
        ]
      },
      multipleLineChart: {
        msgCode: "1",
        title: "堆叠折线图",
        xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        legendData: [
          "邮件营销",
          "联盟广告",
          "视频广告",
          "直接访问",
          "搜索引擎"
        ],
        data: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      multipleAreaLineChart: {
        msgCode: "1",
        title: "堆叠面积折线图",
        xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        legendData: [
          "邮件营销",
          "联盟广告",
          "视频广告",
          "直接访问",
          "搜索引擎"
        ],
        data: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: { normal: {} },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      customizedPieChart: {
        msgCode: "1",
        title: "扇形饼图",
        legendData: [
          "直接访问",
          "邮件营销",
          "联盟广告",
          "视频广告",
          "搜索引擎"
        ],
        data: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 274, name: "联盟广告" },
              { value: 235, name: "视频广告" },
              { value: 400, name: "搜索引擎" }
            ],
            roseType: "radius"
            // label: {
            //   normal: {
            //     textStyle: {
            //       color: "#000"
            //     }
            //   }
            // },
            // labelLine: {
            //   normal: {
            //     lineStyle: {
            //       color: "#999"
            //     },
            //     smooth: 0.2,
            //     length: 10,
            //     length2: 20
            //   }
            // }
            // itemStyle: {
            //   normal: {
            //     color: "#c23531",
            //     shadowBlur: 200,
            //     shadowColor: "rgba(0, 0, 0, 0.5)"
            //   }
            // }
          }
        ]
      },
      doughnutPieChart: {
        msgCode: "1",
        title: "环形饼图",
        legendData: [
          "直接访问",
          "邮件营销",
          "联盟广告",
          "视频广告",
          "搜索引擎"
        ],
        data: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ]
          }
        ]
      },
      circlePieChart: {
        msgCode: "1",
        title: "圆形饼图",
        legendData: [
          "直接访问",
          "邮件营销",
          "联盟广告",
          "视频广告",
          "搜索引擎"
        ],
        data: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ]
            // itemStyle: {
            //   emphasis: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)"
            //   }
            // }
          }
        ]
      },
      wordCloudChart: {
        msgCode: "1",
        title: "词云",
        data: [
          {
            name: "Sam S Club",
            value: 10000,
            textStyle: {
              normal: {
                color: "black"
              },
              emphasis: {
                color: "red"
              }
            }
          },
          {
            name: "Macys",
            value: 6181
          },
          {
            name: "Amy Schumer",
            value: 4386
          },
          {
            name: "Jurassic World",
            value: 4055
          },
          {
            name: "Charter Communications",
            value: 2467
          },
          {
            name: "Chick Fil A",
            value: 2244
          },
          {
            name: "Planet Fitness",
            value: 1898
          },
          {
            name: "Pitch Perfect",
            value: 1484
          },
          {
            name: "Express",
            value: 1112
          },
          {
            name: "Home",
            value: 965
          },
          {
            name: "Johnny Depp",
            value: 847
          },
          {
            name: "Lena Dunham",
            value: 582
          },
          {
            name: "Lewis Hamilton",
            value: 555
          },
          {
            name: "KXAN",
            value: 550
          },
          {
            name: "Mary Ellen Mark",
            value: 462
          },
          {
            name: "Farrah Abraham",
            value: 366
          },
          {
            name: "Rita Ora",
            value: 360
          },
          {
            name: "Serena Williams",
            value: 282
          },
          {
            name: "NCAA baseball tournament",
            value: 273
          },
          {
            name: "Point Break",
            value: 265
          }
        ]
      },
      mixChart: {
        msgCode: "1",
        title: "混合图",
        xData: ["总统致辞", "执行沟通", "请愿书", "纪念仪式"],
        legendData: ["众议院通讯", "参议院通讯"],
        data: [
          {
            name: "来源",
            radius: [0, "60%"],
            center: ["25%", "50%"],
            type: "pie",
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: "#fff"
              }
            },
            data: [
              { value: 335, name: "众议院通讯" },
              { value: 310, name: "参议院通讯" }
            ]
          },
          {
            data: [120, 200, 150, 80],
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            data: [120, 200, 150, 80],
            type: "bar",
            xAxisIndex: 2,
            yAxisIndex: 2
          }
        ]
      },

      testUrl: "",
      url: "http://1.com",
      testUrl1: "",
      url1: "222",
      testUrl2: "",
      url2: "333",
      testUrl3: "",
      url3: "444",
      testUrl4: "",
      url4: "555",
      testUrl5: "",
      url5: "666",
      testUrl6: "",
      url6: "777",
      testUrl7: "",
      url7: "888",
      testUrl8: "",
      url8: "999",
      testUrl9: "",
      url9: "1000",
      testUrl10: "",
      url10: "1001",
      testUrl11: "",
      url11: "1002",
      id: ""
    };
  },
  // mounted() {
  //   this.$axios.get("api").then(res => {
  //     this.url = res.data.url;
  //   });
  // },
  methods: {
    // 下拉选项改变，做查询
    handleChangeVal(val) {
      // 之后不用this.$refs.chartSelect这种方式
      this.$refs.chartSelect.handleChangeValAction("http://1.com", { id: val });
      // 而采用这种方式，子组件改为watch监听它
      // this.opt={currentDate:val}
    },

    // 仅供后端测试接口用，后面要删掉
    testClickAction() {
      // 这里填入url地址如：'api/'
      this.url = this.testUrl;
    },
    testClickAction1() {
      // 这里填入url地址如：'api/'
      this.url1 = this.testUrl1;
    },
    testClickAction2() {
      this.url2 = this.testUrl2;
    },
    testClickAction3() {
      this.url3 = this.testUrl3;
    },
    testClickAction4() {
      this.url4 = this.testUrl4;
    },
    testClickAction5() {
      this.url5 = this.testUrl5;
    },
    testClickAction6() {
      this.url6 = this.testUrl6;
    },
    testClickAction7() {
      this.url7 = this.testUrl7;
    },
    testClickAction8() {
      this.url8 = this.testUrl8;
    },
    testClickAction9() {
      this.url9 = this.testUrl9;
    },
    testClickAction10() {
      this.url10 = this.testUrl10;
    },
    testClickAction11() {
      this.url11 = this.testUrl11;
    }
  }
};
</script>

<style scoped>
.chart {
  margin: 10px;
  display: flex;
}
.chart-showData {
  border: 1px dotted #f00;
  overflow: auto;
  height: 500px;
  width: 50%;
  box-sizing: border-box;
  margin-right: 20px;
  padding: 20px;
}
.chart-showData-title {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
}
</style>

